<template>
	<view class="content">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff" title="发布求购" bgColor="transparent" :autoBack="true"
			:placeholder="false">
		</u-navbar>
		<view class="login-top">
			<view class="top">
				<view class="top-text">
					交易总额（CNY）
				</view>
				<view class="top-title">
					{{Number(hold_num * sales_num)}}
				</view>
			</view>
		</view>
		<view class="login-content">
			<view class="content-title">
				当前单价
			</view>
			<view class="entry">
				<u--input maxlength="16" border="none" color="#fff" disabled disabledColor="rgba(0,0,0,0.0)"
					v-model="hold_num" placeholder="">
					<template slot="suffix">
						<view class="entry-text">
							当前持有：{{info.balance || '0'}}
						</view>
					</template>
				</u--input>
			</view>
			<view class="content-title">
				输入求购数量
			</view>
			<view class="entry">
				<u--input maxlength="10" type="number" border="none" color="#fff" v-model="sales_num"
					placeholder="请输入求购数量">
					<template slot="suffix">
						<view class="entry-text">
							手续费：{{info.commission || '0'}}%
						</view>
					</template>
				</u--input>
			</view>
			<view class="content-title">
				安全密码
			</view>
			<view class="entry">
				<u--input maxlength="16" type="password" border="none" color="#fff" v-model="password"
					placeholder="请输入您的安全密码">
				</u--input>
			</view>
			<view class="btn">
				<u-button size="large" @click="goup" style="color: #000;border-radius: 50rpx;"
					color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)"
					type="primary" text="发布求购"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hold_num: '',
				sales_num: '',
				password: '',
				info: {}
			}
		},
		onLoad() {
			this.releaseindex()
		},
		methods: {
			goup() {
				console.log(this.sales_num)
				if (this.sales_num == '') {
					uni.showToast({
						title: '请输入求购数量！',
						icon: 'none'
					})
					return
				}
				if (Number(this.sales_num) < Number(this.info.min_num)) {
					uni.showToast({
						title: '最少求购数量为' + this.info.min_num,
						icon: 'none'
					})
					return
				}
				if (Number(this.sales_num) > Number(this.info.max_num)) {
					uni.showToast({
						title: '最多求购数量为' + this.info.max_num,
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '请输入您的安全密码！',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					mask: true
				})
				let params = {
					price: this.hold_num,
					num: this.sales_num,
					password: this.password,
					type: 2
				}
				this.$Request({
					method: 'POST',
					url: '/api/exchange/release_qiu',
					data: params
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})
			},
			releaseindex() {
				this.$Request({
					method: 'POST',
					url: '/api/exchange/releaseindex',
					data: {}
				}).then(res => {
					this.info = res.data
					this.hold_num = res.data.price
				})
			}
		}
	}
</script>
<style>
	page {
		background: #17191A;
	}
</style>
<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 568rpx;
	}

	.login-top {
		padding: 30rpx;

		.top {
			height: 300rpx;
			color: #fff;
			margin-top: 80rpx;
			background-image: url('../../../static/otc/otc-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 300rpx;
			padding: 50rpx 30rpx;

			.top-title {
				font-size: 55rpx;
				font-weight: 600;
				margin-top: 20rpx;
			}

			.top-text {
				font-size: 28rpx;
			}
		}
	}

	.login-content {
		padding: 0 30rpx;
		color: #fff;

		.content-title {
			font-size: 28rpx;
			font-weight: 600;
			padding: 30rpx 0;
		}

		.entry {
			padding: 20rpx;
			background: linear-gradient(134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 4rpx solid rgba(108,233,137,0.12);

			.entry-text {
				font-size: 24rpx;
				color: #999;
			}
		}

		.btn {
			margin-top: 50rpx;
		}
	}
</style>